<template>
  <ContainerGroup>
    <!-- 院区选择开始 -->
    <Container class="tab-bar">
      <div style="display: flex; justify-content: space-between">
        <el-tabs v-model="yard" @tab-click="handleClick">
          <el-tab-pane label="三香院区" name="1">{{ "" }}</el-tab-pane>
          <el-tab-pane label="浒关院区" name="2">{{ "" }}</el-tab-pane>
        </el-tabs>
        <div class="change-style">
          <el-switch
            v-model="isCardStyle"
            style="display: block"
            active-color="#13ce66"
            inactive-color="#ffbc05"
            active-text="表格模式"
            inactive-text="卡片模式"
          />
        </div>
      </div>
    </Container>
    <!-- 院区选择结束 -->

    <!-- 条件筛选开始 -->
    <Container>
      <div class="department query-main" :style="{ height: containerHeight }">
        <div class="label">科室：</div>
        <div class="item-box">
          <div
            v-for="(item, index) in departmentList"
            :key="item.deptCode"
            :class="{ 'dpt-btn': true, selected: index === currentIndex }"
            @click="changeDepartment(item, index)"
          >
            {{ item.deptName }}
          </div>
        </div>
        <div class="btn-area">
          <span
            v-show="showCloseAndOpen"
            class="more-text"
            style="margin-right: 6px"
            @click="openAndCloseFilterForm"
            >{{ openOrCloseText }}</span
          >
          <i v-if="openOrCloseText === '展开'" class="el-icon-arrow-down">{{
            ""
          }}</i>
          <i v-else class="el-icon-arrow-up">{{ "" }}</i>
        </div>
      </div>
      <div class="query-box query-main">
        <div class="label">其他选项：</div>
        <div class="item-box">
          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">日期：</span>
            <el-date-picker
              v-model="ruleForm.timeDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </div>
          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">姓名：</span>
            <el-input
              v-model="ruleForm.patientName"
              placeholder="请输入姓名"
              size="mini"
            />
          </div>
          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">患者状态：</span>
            <el-select
              v-model="ruleForm.status"
              placeholder="请选择状态"
              size="mini"
              style="width: 180px"
              filterable
              clearable
              @change="statusChange"
            >
              <el-option
                v-for="item in ruleFormSelect.statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div
            class="form-item"
            style="margin-left: 8px; margin-right: 56px; margin-bottom: 10px"
          >
            <span class="form-item-label">登记状态：</span>
            <el-select
              v-model="ruleForm.registerStatus"
              placeholder="请选择登记状态"
              size="mini"
              style="width: 180px"
              filterable
              clearable
            >
              <el-option
                v-for="item in ruleFormSelect.registerStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="query-reset-btn right-btn-container">
          <div
            v-for="(item, index) in buttonList"
            :key="index + '_'"
            class="form-item-btn"
          >
            <Button
              :type="item.type"
              :icon="item.icon"
              :loading="item.loading"
              @click="item.handlerClick"
              >{{ item.label }}</Button
            >
          </div>
        </div>
      </div>
    </Container>
    <!-- 条件筛选结束 -->

    <!-- 病员卡片区域开始 -->
    <Container class="main" :height="height">
      <div v-loading="loading" class="wrap" style="height: 100%">
        <div
          class="patients-count"
          style="text-align: right; padding: 0px 8px 8px 0"
        >
          已登记/未登记/总人数： {{ patientsCount }}
        </div>
        <div class="card-container">
          <Empty v-if="patientsList.length === 0" style="margin: 20px auto" />
          <template v-if="isCardStyle">
            <PatientCard
              v-for="item in patientsList"
              :key="item.id"
              :patient-info="item"
              @click.native="checkDetail(item)"
              @contextmenu.prevent.native="rightClick($event, item)"
            />
          </template>
          <template v-else>
            <el-table
              v-if="patientsList.length !== 0"
              :data="patientsList"
              style="width: 100%"
            >
              <el-table-column prop="name" label="姓名" width="150" />
              <el-table-column prop="sex" label="性别" width="150">
                <template slot-scope="scope">
                  {{ scope.row.sex === "1" ? "男" : "女" }}
                </template>
              </el-table-column>
              <el-table-column prop="age" label="年龄" width="150">
                <template slot-scope="scope">
                  {{ `${scope.row.age}岁` }}
                </template>
              </el-table-column>
              <el-table-column prop="yblx" label="医保类型" width="150">
                <template slot-scope="scope">
                  {{ scope.row.yblx === "自费" ? "自费" : "医保" }}
                </template>
              </el-table-column>
              <el-table-column prop="ryzt" label="入院状态" width="150" />
              <el-table-column prop="state" label="登记状态" width="150">
                <template slot-scope="scope">
                  {{ scope.row.state === "0" ? "未登记" : "已登记" }}
                </template>
              </el-table-column>
              <el-table-column prop="emplName" label="医生姓名" width="150" />
              <el-table-column prop="deptName" label="所在科室" width="150" />
              <el-table-column prop="doit" label="检查进度" width="100">
                <template slot-scope="scope">
                  {{ `${scope.row.doit} / ${scope.row.total}` }}
                </template>
              </el-table-column>
              <el-table-column prop="yysj" label="预约时间" width="250" />
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <span>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="查看详情"
                      placement="top"
                    >
                      <i
                        class="el-icon-tickets"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="checkDetail(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                  <span
                    v-if="scope.row.ryzt === '取消'"
                    style="margin-left: 8px"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="恢复预约"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-check"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="btn(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                  <span
                    v-if="scope.row.ryzt === '预约'"
                    style="margin-left: 8px"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="取消状态"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-close"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="btn(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                  <span
                    v-if="scope.row.yblx === '国家医保'"
                    style="margin-left: 8px"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="修改医保类型"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-close"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="changeMedicalType(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                  <span
                    v-if="scope.row.medicalInsuranceFlag != null"
                    style="margin-left: 8px"
                  >
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="撤销医保修改"
                      placement="top"
                    >
                      <i
                        class="el-icon-circle-close"
                        style="font-size: 20px; color: #217dfa; cursor: pointer"
                        @click="revokeUpdate(scope.row)"
                      />
                    </el-tooltip>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 取消预约 -->
          <ul v-show="menuVisible" id="menu" class="menu" @mouseover="onleitve">
            <li class="menu__item" style="margin-top: 3px" @click.stop="btn">
              <!-- 取消状态 -->
              <!-- {{ itemState === '0' ? '恢复预约' : '取消状态' }} -->
              <template v-if="itemRyzt === '取消'">恢复预约</template>
              <template v-if="itemRyzt === '预约'">取消状态</template>
            </li>
            <li class="menu__item" @click.stop="btn1">取消</li>
            <li
              v-if="medicalInsuranceFlag != null"
              class="menu__item"
              @click.stop="revokeUpdate"
            >
              转国家
            </li>
            <template
              v-if="medicalInsuranceFlag === null && medicalType === '国家医保'"
            >
              <li class="menu__item" @click.stop="changeMedicalType(1)">
                转苏州
              </li>
              <li class="menu__item" @click.stop="changeMedicalType(0)">
                转异地
              </li>
            </template>
          </ul>
        </div>
        <div style="text-align: right; padding: 8px 0 0 0">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="prev, pager, next, sizes, total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </Container>
    <!-- 病员卡片区域结束 -->
  </ContainerGroup>
</template>

<script>
import PatientCard from "./children/PatientCard.vue";

import {
  getVYqBrdjxxPagesInfo,
  getExportVYqBrdjxxInfo,
  getAccess,
  cancelIiprepayIn,
  gePpeopleStatistics,
} from "../../utils/apis/preparedness";

import changeMedicalTypeApi from "../../utils/apis/changeMedicalType";

export default {
  name: "",
  components: {
    PatientCard,
  },
  data() {
    return {
      menuVisible: false, // 右键点击
      // 按钮列表
      buttonList: [
        {
          label: "查询",
          type: "primary",
          icon: "search",
          handlerClick: this.handlerSearch,
          loading: false,
        },
        {
          label: "重置",
          type: "info",
          icon: "reset",
          handlerClick: this.handlerReset,
        },
        {
          label: "导出",
          type: "info",
          handlerClick: this.handlerExport,
        },
      ],
      // 院区选中
      yard: "1",
      // 科室列表
      departmentList: [],
      // 当前选中科室索引值
      currentIndex: 0,
      // 查询表单（数据）
      ruleForm: {
        timeDate: [],
        status: 1,
        patientName: "",
        registerStatus: "",
      },
      // 状态
      ruleFormSelect: {
        statusOptions: [
          {
            label: "预约",
            value: 1,
          },
          {
            label: "取消",
            value: 0,
          },
          {
            label: "入院",
            value: 2,
          },
          {
            label: "出院",
            value: 3,
          },
          {
            label: "待床",
            value: 4,
          },
          {
            label: "已通知",
            value: 5,
          },
          {
            label: "无费用退院",
            value: 6,
          },
        ],
        registerStatusOptions: [
          {
            label: "未登记",
            value: "0",
          },
          {
            label: "已登记",
            value: "1",
          },
        ],
      },
      showCloseAndOpen: true,
      openOrCloseText: "展开",
      containerHeight: "28px",
      height: "fill",
      // 病人列表
      patientsList: [],
      loading: true,
      total: 0,
      pageNum: 1,
      pageSize: 20,
      currentPage: 1,
      deptCode: null,
      preid: "",
      patientsCount: "",
      itemRyzt: "",
      isCardStyle: true,
      medicalInsuranceFlag: null,
      medicalType: null,
      name: null,
    };
  },
  mounted() {
    this.getTime();
    this._getDept();
    this._gePpeopleStatistics();
  },
  methods: {
    // 修改国家医保类型
    changeMedicalType(type) {
      const preid =
        this.preid == "undefined" || this.preid == "" || this.preid == null
          ? row.preid
          : this.preid;
      const name =
        this.name == "undefined" || this.name == "" || this.name == null
          ? row.name
          : this.name;
      console.log(preid);
      console.log(name);
      console.log(type);
      changeMedicalTypeApi.changeMedicalType(name, preid, type).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("修改成功");
          this.$router.go(0);
        } else {
          this.$message.error("修改失败");
        }
      });
      this.menuVisible = false;
    },

    // 撤销修改医保
    revokeUpdate() {
      const preid =
        this.preid == "undefined" || this.preid == "" || this.preid == null
          ? row.preid
          : this.preid;
      console.log(preid);
      changeMedicalTypeApi.revokeUpdate(preid).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("修改成功");
          this.$router.go(0);
        } else {
          this.$message.error("修改失败");
        }
      });
      this.menuVisible = false;
    },

    _gePpeopleStatistics() {
      const params = {
        // 院区 开始、结束时间
        deptCode: this.deptCode,
        yard: this.yard,
        startTime:
          this.ruleForm.timeDate === "" || this.ruleForm.timeDate === null
            ? ""
            : this.ruleForm.timeDate[0],
        endTime:
          this.ruleForm.timeDate === "" || this.ruleForm.timeDate === null
            ? ""
            : this.ruleForm.timeDate[1],
        state: this.ruleForm.status,
        registerCode: this.ruleForm.registerStatus,
      };
      gePpeopleStatistics(params).then((res) => {
        if (res.data.code == 200) {
          this.patientsCount = res.data.data;
        }
      });
    },
    getTime() {
      const nowdays = new Date();
      nowdays.setTime(nowdays.getTime());
      const year = nowdays.getFullYear();
      const month = nowdays.getMonth() + 1;
      const myDate = nowdays.getDate();
      const monthnum = month >= 10 ? "" : "0";
      const datenum = myDate >= 10 ? "" : "0";
      const startDate =
        year + "-" + monthnum + month + "-" + datenum + myDate + " 00:00:00";
      const endDate =
        year + "-" + monthnum + month + "-" + datenum + myDate + " 23:59:00";
      this.ruleForm.timeDate = [startDate, endDate];
    },
    _getDept() {
      getAccess({ yard: this.yard }).then((res) => {
        if (res.data.code === 200) {
          if (res.data.data != null) {
            this.departmentList = res.data.data;
            this.deptCode = res.data.data.length
              ? res.data.data[0].deptCode
              : null;
          }
          this._getData();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this._getData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loading = true;
      this._getData();
    },
    _getData() {
      const params = {
        deptCode: this.deptCode,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startTime:
          this.ruleForm.timeDate === "" || this.ruleForm.timeDate === null
            ? ""
            : this.ruleForm.timeDate[0],
        endTime:
          this.ruleForm.timeDate === "" || this.ruleForm.timeDate === null
            ? ""
            : this.ruleForm.timeDate[1],
        yard: this.yard,
        state: this.ruleForm.status,
        name: this.ruleForm.patientName,
        registerCode: this.ruleForm.registerStatus,
      };
      getVYqBrdjxxPagesInfo(params).then((res) => {
        if (res.data.code === 200) {
          this.patientsList = res.data.data.list;
          this.total = res.data.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },

    _getExportData() {
      const params = {
        deptCode: this.deptCode,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startTime:
          this.ruleForm.timeDate === "" || this.ruleForm.timeDate === null
            ? ""
            : this.ruleForm.timeDate[0],
        endTime:
          this.ruleForm.timeDate === "" || this.ruleForm.timeDate === null
            ? ""
            : this.ruleForm.timeDate[1],
        yard: this.yard,
        state: this.ruleForm.status,
        name: this.ruleForm.patientName,
        registerCode: this.ruleForm.registerStatus,
      };
      getExportVYqBrdjxxInfo(params).then((res) => {
        // if (res.data.code === 200) {
        const blob = new Blob([res.data]);
        const fileName = "患者信息" + ".xlsx";
        const URL = window.URL || window.webkitURL || window.moxURL;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName; // 命名下载名称
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob); // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink);
          elink.click(); // 点击触发下载
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
        // }
      });
    },
    // 院区选择
    handleClick(tab, event) {
      this.currentIndex = 0;
      this._getDept();
    },
    // 状态改变触发
    statusChange(val) {
      console.log(val);
    },
    // 查询功能
    handlerSearch() {
      this.pageNum = 1;
      this._getData();
      this._gePpeopleStatistics();
    },
    // 重置搜索表单
    handlerReset(val) {
      console.log(val);
      this.getTime();
      this.ruleForm.status = 1;
      this._getData();
    },
    handlerReset(val) {
      console.log(val);
      this.getTime();
      this.ruleForm.status = 1;
      this._getData();
    },
    handlerExport(val) {
      this._getExportData();
    },
    // 科室选择区域 -> 展开收起功能
    openAndCloseFilterForm() {
      this.containerHeight = this.openOrCloseText === "展开" ? "auto" : "28px";
      this.openOrCloseText = this.openOrCloseText === "展开" ? "收起" : "展开";
    },
    changeDepartment(item, index) {
      // 判断 -> 加载选中样式 -> 默认选中全部
      this.currentIndex = index;
      // console.log(item)
      this.deptCode = item.deptCode;
      // 更改查询条件
      this._getData();
      this._gePpeopleStatistics();
    },
    // checkDetail(index) {
    //   this.$router.push({
    //     name: 'PrepareDetail',
    //     params: {
    //       preid: this.patientsList[index].preid,
    //       patientName: this.patientsList[index].name
    //     },
    //     query: {
    //       preid: this.patientsList[index].preid,
    //       patientName: this.patientsList[index].name
    //     }
    //   })
    // },
    checkDetail(row) {
      this.$router.push({
        name: "PrepareDetail",
        params: {
          preid: row.preid,
          patientName: row.name,
        },
        query: {
          preid: row.preid,
          patientName: row.name,
        },
      });
    },
    // 鼠标移上去高亮
    onleitve() {
      var lis = document.getElementsByTagName("li");
      for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
          this.style.color = "#217DFA";
        };
        lis[i].onmouseout = function() {
          this.style.color = "#555555";
        };
      }
    },
    // 取消小框框
    btn1() {
      this.menuVisible = false;
    },
    // 取消预约确定按钮
    btn(row) {
      if (row.ryzt) {
        this.itemRyzt = row.ryzt;
      }
      debugger;
      const preid =
        this.preid == "undefined" || this.preid == "" || this.preid == null
          ? row.preid
          : this.preid;
      let content;
      if (this.itemRyzt === "预约") {
        content = `<div style="word-break:break-all;width:386px">确定将当前状态更改为取消状态吗？</div>`;
        this.$confirm({
          content: content,
          title: "确认信息",
          okFn: (res) => {
            const params = {
              preId: preid,
              state: "0",
            };
            cancelIiprepayIn(params).then((res) => {
              if (res.data.code === 200) {
                if (res.data.data) {
                  this.$message.success("取消状态成功！！");
                  this.$router.go(0);
                } else {
                  this.$message.error("取消状态失败！！");
                }
              } else {
                this.$message.error(res.data.message);
              }
            });
          },
          cancelFn: (res) => {
            console.log("取消");
          },
        });
      } else if (this.itemRyzt === "取消") {
        content = `<div style="word-break:break-all;width:386px">确定将当前状态更改为恢复预约吗？</div>`;
        this.$confirm({
          content: content,
          title: "确认信息",
          okFn: (res) => {
            const params = {
              preId: preid,
              state: "1",
            };
            cancelIiprepayIn(params).then((res) => {
              if (res.data.code === 200) {
                if (res.data.data) {
                  this.$message.success("恢复预约成功！！");
                  this.$router.go(0);
                } else {
                  this.$message.error("恢复预约失败！！");
                }
              } else {
                this.$message.error(res.data.message);
              }
            });
          },
          cancelFn: (res) => {
            console.log("取消");
          },
        });
      }
    },
    // 右键取消预约
    rightClick(MouseEvent, item) {
      this.preid = item.preid;
      this.itemRyzt = item.ryzt;
      this.medicalType = item.yblx;
      this.medicalInsuranceFlag = item.medicalInsuranceFlag;
      this.name = item.name;
      if (item.ryzt === "预约" || item.ryzt === "取消") {
        this.menuVisible = true;
        var menu = document.querySelector("#menu");
        if (MouseEvent.screenX < 100) {
          menu.style.left = MouseEvent.clientX + "px";
          menu.style.top = MouseEvent.clientY + "px";
        }
        if (MouseEvent.screenX > 100) {
          menu.style.left = MouseEvent.clientX + 4 + "px";
          menu.style.top = MouseEvent.clientY + 7 + "px";
        }
        document.addEventListener("click", this.foo);
      }
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
  },
};
</script>

<style lang="less" scoped>
.container.tab-bar {
  margin-top: 0;
  padding: 0 10px 5px 10px;
}
/deep/ .el-tabs__header.is-top {
  margin-bottom: 0;
}
/deep/ .el-tabs__nav-wrap::after {
  background-color: #fff;
}
.query-main {
  display: flex;
  .label {
    flex: 0 0 76px;
    padding-top: 2px;
    margin-right: 32px;
  }
  .item-box {
    flex: 1 1 auto;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    .dpt-btn {
      cursor: pointer;
      padding: 2px 8px;
      margin-bottom: 12px;
      margin-right: 12px;
    }
    .dpt-btn:hover {
      background-color: #2165f9;
      color: #fff;
      border-radius: 3px;
      transition: 0.4s;
    }
  }
}
.department {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  overflow: hidden;
  // .label{
  //   flex-grow: 2;
  // }
  .btn-area {
    flex: 0 0 76px;
    padding-top: 2px;
    margin-left: 32px;
    text-align: right;
    padding-right: 3px;
    span {
      cursor: pointer;
      color: #217dfa;
    }
    i {
      color: #217dfa;
    }
  }
}
.query-box {
  padding-top: 10px;
  .query-reset-btn {
    width: 180px;
  }
}
/deep/ .el-input {
  width: 180px;
}
.right-btn-container {
  text-align: center;
  display: flex;
  justify-content: flex-end;
  padding-top: 5px;
  .form-item-btn {
    margin: 0px 3px;
  }
  .more-text {
    display: block;
    width: 50px;
    margin-top: 6px;
    color: #2165f9;
    cursor: pointer;
    user-select: none;
  }
}
.container.main {
  overflow-y: auto;
  .card-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
}
.patient-card {
  margin: 16px;
}
.selected {
  background-color: #2165f9;
  color: #fff;
  border-radius: 3px;
}
/deep/ .el-tabs__item:hover {
  color: #2165f9;
}
/deep/ .el-tabs__item.is-active {
  color: #2165f9;
}
.menu {
  height: auto;
  width: 90px;
  position: absolute;
  z-index: 99;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
  .menu__item {
    display: block;
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-size: 14px;
    color: #555555;
    cursor: pointer;
    //   border: 1px solid #eeeeee;
    // background-color: #ffffff;
  }
}
.change-style {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
